<template>
  <s-layout title="编辑订单">
    <view class="form-container">
      <uni-forms ref="formRef" :model="state.formData" :rules="rules" validate-trigger="bind">
        <uni-forms-item label="代理商ID" name="agentId" required>
          <uni-easyinput type="number" v-model="state.formData.agentId" placeholder="请输入代理商ID"></uni-easyinput>
        </uni-forms-item>
        <uni-forms-item label="细胞产品ID" name="cellProductId" required>
          <uni-easyinput type="number" v-model="state.formData.cellProductId" placeholder="请输入细胞产品ID"></uni-easyinput>
        </uni-forms-item>
        <uni-forms-item label="细胞规格" name="cellSpecification" required>
          <uni-easyinput v-model="state.formData.cellSpecification" placeholder="请输入细胞规格"></uni-easyinput>
        </uni-forms-item>
        <uni-forms-item label="是否拆分" name="isSplit">
          <switch :checked="state.formData.isSplit" @change="state.formData.isSplit = $event.detail.value" style="transform:scale(0.7)"></switch>
        </uni-forms-item>
        <uni-forms-item label="袋（管）数" name="bagCount" required>
          <uni-number-box v-model="state.formData.bagCount" :min="1"></uni-number-box>
        </uni-forms-item>
        <uni-forms-item label="细胞总数" name="totalCells">
          <uni-easyinput v-model="state.formData.totalCells" placeholder="请输入细胞总数"></uni-easyinput>
        </uni-forms-item>
        <uni-forms-item label="细胞来源" name="cellOrigin" required>
          <uni-easyinput v-model="state.formData.cellOrigin" placeholder="请输入细胞来源"></uni-easyinput>
        </uni-forms-item>
        <uni-forms-item label="来源备注" name="originRemark">
          <uni-easyinput v-model="state.formData.originRemark" placeholder="请输入来源备注"></uni-easyinput>
        </uni-forms-item>
        <uni-forms-item label="使用时间" name="usageTime" required>
          <uni-datetime-picker type="datetime" v-model="state.formData.usageTime" placeholder="请选择使用时间" />
        </uni-forms-item>
        <uni-forms-item label="预约数量" name="reservationQuantity" required>
          <uni-number-box v-model="state.formData.reservationQuantity" :min="1"></uni-number-box>
        </uni-forms-item>
        <uni-forms-item label="使用人" name="userName">
          <uni-easyinput v-model="state.formData.userName" placeholder="请输入使用人"></uni-easyinput>
        </uni-forms-item>
        <uni-forms-item label="使用人联系方式" name="userContact">
          <uni-easyinput v-model="state.formData.userContact" placeholder="请输入使用人联系方式"></uni-easyinput>
        </uni-forms-item>
        <uni-forms-item label="签收人" name="signerName">
          <uni-easyinput v-model="state.formData.signerName" placeholder="请输入签收人"></uni-easyinput>
        </uni-forms-item>
        <uni-forms-item label="签收人手机号" name="signerContact">
          <uni-easyinput v-model="state.formData.signerContact" placeholder="请输入签收人手机号"></uni-easyinput>
        </uni-forms-item>
        <uni-forms-item label="订单备注" name="remark">
          <uni-easyinput type="textarea" v-model="state.formData.remark" placeholder="请输入订单备注"></uni-easyinput>
        </uni-forms-item>
        <uni-forms-item label="同意协议" name="agreeProtocol" required>
          <checkbox-group @change="state.formData.agreeProtocol = $event.detail.value.length > 0">
            <label>
              <checkbox :checked="state.formData.agreeProtocol" value="true" />我已阅读并同意相关协议
            </label>
          </checkbox-group>
        </uni-forms-item>
      </uni-forms>
    </view>

    <view class="fixed-bottom-bar">
      <button class="submit-btn ui-BG-Main-Gradient" @tap="submitForm">保存</button>
    </view>

  </s-layout>
</template>

<script setup>
  import { reactive, ref } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import ReservationRecordApi from '@/sheep/api/system/reservationRecord';
  import SLayout from '@/sheep/components/s-layout/s-layout.vue';
  import UniForms from '@/uni_modules/uni-forms/components/uni-forms/uni-forms.vue';
  import UniFormsItem from '@/uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue';
  import UniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue';
  import UniNumberBox from '@/uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue';
  import UniDatetimePicker from '@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue';

  const formRef = ref(null);
  const state = reactive({
    orderId: null,
    formData: { // 初始化表单数据
      agentId: null,
      cellProductId: null,
      cellSpecification: '',
      isSplit: false,
      bagCount: 1,
      totalCells: '',
      cellOrigin: '',
      originRemark: '',
      usageTime: '',
      reservationQuantity: 1,
      userName: '',
      userContact: '',
      signerName: '',
      signerContact: '',
      remark: '',
      agreeProtocol: false,
    },
  });

  // 表单校验规则
  const rules = {
    agentId: { rules: [{ required: true, errorMessage: '代理商ID不能为空' }] },
    cellProductId: { rules: [{ required: true, errorMessage: '细胞产品ID不能为空' }] },
    cellSpecification: { rules: [{ required: true, errorMessage: '细胞规格不能为空' }] },
    bagCount: { rules: [{ required: true, errorMessage: '袋（管）数不能为空' }] },
    cellOrigin: { rules: [{ required: true, errorMessage: '细胞来源不能为空' }] },
    usageTime: { rules: [{ required: true, errorMessage: '使用时间不能为空' }] },
    reservationQuantity: { rules: [{ required: true, errorMessage: '预约数量不能为空' }] },
    agreeProtocol: { rules: [{ validator: (rule, value, callback) => {
          if (!value) {
            callback('请同意协议');
          } else {
            callback();
          }
        }, errorMessage: '请同意协议' }] },
  };

  async function getOrderData() {
    try {
      const { code, data } = await ReservationRecordApi.getDetail(state.orderId);
      if (code === 0) {
        // 将获取到的数据填充到表单中
        Object.keys(state.formData).forEach(key => {
          if (data[key] !== undefined) {
            state.formData[key] = data[key];
          }
        });
      }
    } catch (e) {
      console.error(e);
    }
  }

  const submitForm = async () => {
    try {
      const res = await formRef.value.validate();
      if (res) {
        const params = { ...state.formData, id: state.orderId };
        const { code } = await ReservationRecordApi.update(params); // 假设的更新API
        if (code === 0) {
          sheep.$helper.toast('保存成功');
          sheep.$router.back();
        } else {
          sheep.$helper.toast('保存失败');
        }
      }
    } catch (e) {
      console.error(e);
    }
  };

  onLoad((options) => {
    if (options.id) {
      state.orderId = options.id;
      getOrderData();
    }
  });
</script>

<style lang="scss" scoped>
  .form-container {
    padding: 20rpx;
    background-color: #fff;
  }
  .fixed-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20rpx;
    background-color: #fff;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
    z-index: 100;
  }
  .submit-btn {
    width: 100%;
    height: 80rpx;
    border-radius: 40rpx;
    font-size: 30rpx;
    color: #fff;
    background: linear-gradient(to right, #FF6000, #FF8C00); /* 示例渐变色 */
    border: none;
  }
</style>

